<template>
    <div class="movie-list">
        <div class="img">
            <img :src="imgUrl"/>
        </div>
        <div class="texts" v-if="!isClassic">
            <div class="detial">
                <div class="mname">
                    <p>{{movie.nm}}</p>
                    <span :class="movie.version" v-if="movie.version"></span>
                    <span class="pre-show" v-if="movie.preShow"></span>
                </div>
                <div class="sc" v-if="movie.sc">
                    <span v-if="movie.preShow">点映评&nbsp;</span>
                    <span v-else>观众评&nbsp;</span>
                    <span class="count">{{movie.sc}}</span>
                </div>
                <div class="wish" v-else>
                    <span class="count">{{movie.wish}}</span>
                    <span>&nbsp;人想看</span>
                </div>
                <div class="star">
                    <span>主演:</span>
                    <span class="star">{{movie.star}}</span>
                </div>
                <div class="info" v-if="isComing">
                    {{movie.rt}}上映
                </div>
                <div v-else class="info">
                    {{movie.showInfo}}
                </div>
            </div>
            <router-link :to="`/mtrade/${movie.id}`">
                <div class="btn" :style="{'backgroundColor':movie.showStateButton.color}" v-if="movie.showStateButton && movie.showStateButton.color">
                    {{movie.showStateButton.content}}
                </div>
                <div class="btn" style="backgroundColor:#faaf00" v-else>
                    想看
                </div>
            </router-link>
        </div>

        <div class="texts" v-else>
            <div class="detial">
                <div class="mname">
                    <p>{{movie.movieInfo.title}}</p>
                </div>
                <div class="star">
                    <span class="star">{{movie.movieInfo.englishTitle}}</span>
                </div>
                <div class="star">
                    <span class="star">{{movie.movieInfo.actors}}</span>
                </div>
                <div class="info">
                    {{movie.movieInfo.showInfo}}
                </div>
            </div>
            <div class="score" v-if="movie.score">
                    <span class="count">{{movie.score}}</span>
                    <span>分</span>
                </div>
                <div v-else>
                    <span class="no-count">暂无评分</span>
                </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        movie:Object,
        isComing:{
            type:Boolean,
            default:false
        },
        isClassic:{
            type:Boolean,
            default:false
        },
    },
    computed:{
        imgUrl(){
            if(this.isClassic){
                // let sr=this.movie.poster.replace('http','https');
                let str=this.movie.poster;
                let sr="";
                if(str.indexOf('https') == -1){
                    sr=str.replace('http','https');
                }else{
                    sr=str;
                }
                return sr.replace('w.h','65.90');
            }else{
                // let sr=this.movie.img.replace('http','https');
                let str=this.movie.img;
                let sr="";
                if(str.indexOf('https') == -1){
                    sr=str.replace('http','https');
                }else{
                    sr=str;
                }
                return sr.replace('w.h','65.90');
            }
        }
    },
}
</script>

<style lang="less" scoped>
.movie-list{
    display: flex;
    padding: 10px 0px 0px 10px;
    
    .img{
        width: 65px;

        img{
            width: 100%;
        }
    }

    .texts{
        flex: 1;
        height: 90px;
        margin-left: 7px;
        padding-bottom: 10px;
        padding-right: 10px;
        font-size: 13px;
        color: #666;
        display: flex;
        position: relative;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &::after{
            content: "";
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            border-bottom: 1px solid #f5f5f5;
        }

        .detial{
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            .mname{
                font-size: 17px;
                font-weight: 600;
                display: flex;
                align-items: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                span{
                    display: inline-block;
                    width: 43px;
                    height: 14px;
                    margin-left: 5px;

                    &.v2d.imax{
                        background: url(../assets/v2dimax.png) no-repeat;
                        background-size: contain;
                    }

                    &.v3d{
                        background: url(../assets/v3d.png) no-repeat;
                        background-size: contain;
                    }

                    &.pre-show{
                        background: url(../assets/pre-show.png) no-repeat;
                        background-size: contain;
                    }
                }
            }

            .count{
                font-size: 15px;
                color: #faaf00;
                font-weight: 600;
            }

            .star{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .info{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .btn{
            width: 54px;
            line-height: 27px;
            text-align: center;
            color: #fff;
            border-radius: 14px;
            margin-left: 5px;
        }

        .score{
            width: 50px;
            height: 100%;
            text-align: right;
            
            .count{
                font-size: 15px;
                color: #faaf00;
                font-weight: 600;
            }

            .no-coun{
                font-size: 12px;
            }
        }
    }
}
</style>